<template>
    <div class="box_product">
        <vab-card v-for="(item, i) in productBox" :key="i">
            <template #header>
               <div class="flex_sb">
                    <span class="leve2_title">规则详情 -
                        <span class="fontStrong">[{{ i + 1 }}]</span>
                        - 指定产品满数量赠</span>
                    <div class="flex_just_end">
                        <VabButton title="删除" @click="handleMode('detele')"/>
                        <VabButton type="primary" title="新增" @click="handleMode('add', i)"/>
                    </div>
               </div>
            </template>
            <template #default>
                <el-form :model="ruleForm" ref="ruleFormRef">
                    <!-- <el-row :gutter="24" style="margin-bottom: 12px;">
                        <el-col v-bind="colLay">
                            <el-form-item label="有效数量范围:">
                                指定产品计价总数量
                            </el-form-item>
                        </el-col>
                        <el-col v-bind="colLay">
                            <el-form-item label="最大数量">
                                <VabNumberForm class="width_100" placeholder="填写后，规则送出指定数量的商品后自动停止"/>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <!-- 产品-赠品 -->
                    <el-row class="productBox" :gutter="24" >
                        <el-col :span="24" style="margin-bottom: 12px;">
                            <aside>
                                <header class="table_head flex">
                                    产品信息
                                </header>
                                <el-table :data="ruleForm[i]['product']" border max-height="180px">
                                    <el-table-column label="序号" width="60px" align="center">
                                        <template #default="{ $index }">
                                            <div>
                                                {{ $index + 1 }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="90">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>品牌</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="brand_name">
                                                <span class="text_center ellipsis" > {{ row.brand_name || '--' }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>产品条码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item prop="goods_barcode">
                                                <LazyProductSelect
                                                    type="barcode"
                                                    class="width_100"
                                                    placeholder="请选择"
                                                    v-model="row.goods_barcode"
                                                    :user-org-id="useOrgId"
                                                    @lazy-change="(lazy: any) => {
                                                      lazyChange(lazy, i, $index, 'product')
                                                    }"
                                                />
                                                <span class="error" v-if="!row.goods_barcode">产品条码不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>产品编码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item prop="goods_no">
                                                <LazyProductSelect
                                                    type="number"
                                                    class="width_100"
                                                    placeholder="请选择"
                                                    v-model="row.goods_no"
                                                    :user-org-id="useOrgId"
                                                    @lazy-change="(lazy: any) => {
                                                      lazyChange(lazy, i, $index, 'product')
                                                    }"
                                                />
                                                <span class="error" v-if="!row.goods_no">产品编码不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="360">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>产品名称</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item prop="goods_name">
                                                <LazyProductSelect
                                                    class="width_100"
                                                    placeholder="请选择"
                                                    v-model="row.goods_name"
                                                    :user-org-id="useOrgId"
                                                    @lazy-change="(lazy: any) => {
                                                      lazyChange(lazy, i, $index, 'product')
                                                    }"
                                                />
                                                <span class="error" v-if="!row.goods_name">产品名称不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>规格</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                          <el-form-item prop="specification">
                                            <span class="text_center ellipsis" > {{ row.specification || '--' }}</span>
                                          </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="360">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>数量</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_num">
                                                <VabNumberForm
                                                    :precision="0"
                                                    class="width_100"
                                                    placeholder="请输入"
                                                    v-model="row.goods_num"
                                                />
                                                <span class="error" v-if="!row.goods_num && row.goods_num != 0">数量不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="70">
                                        <template #default="props">
                                            <vab-icon
                                                icon="add-circle-line"
                                                class="base_color"
                                                @click="handleTable(props.$index, i, 'product', 'add')"
                                            />
                                            <vab-icon
                                                v-if="ruleForm[i]['product'].length > 1"
                                                icon="delete-bin-5-line"
                                                @click="handleTable(props.$index, i, 'product', 'detele')"
                                            />
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </aside>
                        </el-col>
                        <el-col :span="24">
                            <aside>
                                <header class="table_head flex">
                                    赠品信息
                                </header>
                                <el-table :data="ruleForm[i]['gift']" border max-height="180px">
                                    <el-table-column label="序号" width="60px" align="center">
                                        <template #default="{ $index }">
                                            <div>
                                                {{ $index + 1 }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="90">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>品牌</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item prop="brand_name">
                                                <span class="text_center ellipsis" > {{ row.brand_name || '--' }}</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>产品条码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item prop="goods_barcode">
                                                <LazyProductSelect
                                                    type="barcode"
                                                    class="width_100"
                                                    placeholder="请选择"
                                                    v-model="row.goods_barcode"
                                                    :user-org-id="useOrgId"
                                                    @lazy-change="(lazy: any) => {
                                                      lazyChange(lazy, i, $index, 'gift')
                                                    }"
                                                />
                                                <span class="error" v-if="!row.goods_barcode">产品条码不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>产品编码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item prop="goods_no">
                                                <LazyProductSelect
                                                    type="number"
                                                    class="width_100"
                                                    placeholder="请选择"
                                                    v-model="row.goods_no"
                                                    :user-org-id="useOrgId"
                                                    @lazy-change="(lazy: any) => {
                                                      lazyChange(lazy, i, $index, 'gift')
                                                    }"
                                                />
                                                <span class="error" v-if="!row.goods_no">产品编码不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="360">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>产品名称</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <el-form-item prop="goods_name">
                                                <LazyProductSelect
                                                    class="width_100"
                                                    placeholder="请选择"
                                                    v-model="row.goods_name"
                                                    :user-org-id="useOrgId"
                                                    @lazy-change="(lazy: any) => {
                                                      lazyChange(lazy, i, $index, 'gift')
                                                    }"
                                                />
                                                <span class="error" v-if="!row.goods_name">产品名称不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>规格</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                          <el-form-item prop="specification">
                                            <span class="text_center ellipsis" > {{ row.specification || '--' }}</span>
                                          </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>是否固定数量</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="is_require">
                                                <VabSelectForm
                                                    class="width_100"
                                                    :options="[
                                                      { value: 1, label: '是' },
                                                      { value: 0, label: '否' },
                                                    ]"
                                                    v-model.trim="row.is_require"
                                                />
                                                <span class="error" v-if="!IsValueHave(row.is_require)">数量不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="240">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>数量</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_num">
                                                <VabNumberForm
                                                    :precision="0"
                                                    class="width_100"
                                                    placeholder="请输入"
                                                    v-model="row.goods_num"
                                                />
                                                <span class="error" v-if="!row.goods_num && row.goods_num != 0">数量不能为空！</span>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="70">
                                        <template #default="props">
                                            <vab-icon
                                                icon="add-circle-line"
                                                class="base_color"
                                                @click="handleTable(props.$index, i, 'gift', 'add')"
                                            />
                                            <vab-icon
                                                v-if="ruleForm[i]['gift'].length > 1"
                                                icon="delete-bin-5-line"
                                                @click="handleTable(props.$index, i, 'gift', 'detele')"
                                            />
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </aside>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </vab-card>
    </div>
</template>

<script setup lang="ts">
import { getProductSearch } from '~/src/api/dms/product';
import LazyProductSelect from '~/src/components/lazySelect/productSelect.vue'
import { IsValueHave } from '~/src/utils/utils';

/**
 * @var
 */

const colLay = {
  xs: 12, sm: 12, md: 12, lg: 8, xl: 8,
}

const ruleFormRef = ref()
const ruleForm = ref<any>([])
const productBox = ref<any>([])

const brandOption = ref<any>([])
const nameOption = ref<any>([])
const numberOption = ref<any>([])

const useOrgId = ref<any>('')

/**
 * @method
 */
// 模块操作
const handleMode = async (type: string, i = 0) => {
  if (type == 'add') {
    productBox.value.splice(i + 1, 0, {})
    ruleForm.value.splice(i + 1, 0, { product: [{}], gift: [{}] })
  }
  if (type == 'detele') {
    productBox.value.pop()
    ruleForm.value.pop()
  }
}

// 表格操作
const handleTable = (i: number, modeIndex: number, mode = '', type: string) => {
  if (type == 'add') {
    ruleForm.value[modeIndex][mode].splice(i + 1, 0, {})
  }
  if (type == 'detele') {
    ruleForm.value[modeIndex][mode].splice(i, 1)
  }
}

// 操作使用组织
const handleUseOrgId = ({ value, lay }: any) => {
  useOrgId.value = value

  // 切换组织 清空产品信息
  if (lay) {
    let list = [...ruleForm.value]

    for (let i = 0; i < list.length; i++) {
      list[i].product = [{}]
      list[i].gift = [{}]
    }
    ruleForm.value = list
  }

}

// 返回值
const lazyChange = ({ value, row }: any, i: number, index: number, type: string) => {

  let list = [...ruleForm.value]
  let item = list[i][type][index]

  const { brand, name, number, barcode, specification } = row

  list[i][type][index] = {
    ...item,
    brand_name: brand,
    goods_name: name,
    goods_no: number,
    goods_barcode: barcode,
    specification,
  }

  ruleForm.value = list
}

const getScreen = async () => {
  try {
    let res = await getProductSearch()

    const { brand, name, number } = res.data

    brandOption.value = brand.map((item: any) => { return { value: item.entry_id, label: item.name } })
    nameOption.value = name.map((item: any) => { return { value: item.name, label: item.name } })
    numberOption.value = number.map((item: any) => { return { value: item.number, label: item.number } })

  } catch (error) {

  }
}

// 更新数据
const getUpdateData = ({ item_list }: any) => {
  // 无数据默认显示一列
  if (!item_list.length) {
    getResetData()
    return
  }

  ruleForm.value = item_list.map((item: any) => {
    return {
      gift: item.gift.map((jtem: any) => {
        const { brand_name, goods_name, goods_no, goods_num, goods_barcode, is_require, specification } = jtem
        return {
          goods_no,
          goods_num,
          brand_name,
          goods_name,
          goods_barcode,
          is_require,
          specification
        }
      }),
      product: item.product.map((jtem: any) => {
        const { brand_name, goods_name, goods_no, goods_num, goods_barcode, is_require, specification } = jtem
        return {
          goods_no,
          goods_num,
          brand_name,
          goods_name,
          goods_barcode,
          is_require,
          specification
        }
      }),
    }
  })
  productBox.value.length = item_list.length
}

// 重置数据
const getResetData = () => {
  ruleForm.value = [{ product: [{}], gift: [{}] }]
}

onMounted(() => {
  handleMode('add')
  getScreen()
})


defineExpose({
  ruleFormRef,
  ruleForm,
  getUpdateData,
  handleUseOrgId,
  getResetData
})
</script>

<style lang="scss" scoped>
.table_head {
  width: 100%;
  padding: 8px 12px;
  background-color: var(--el-color-primary);
  color: #fff;
  font-size: 14px;
}

.box_product {
  :deep() {
    .el-form-item {
      margin-bottom: 2px;
    }
  }

  .transfer {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .productBox {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0px;
    }
  }
}
</style>
